<template>
    <div>
        <table class="">
            <!-- <tr class="content_tr">
                            <td>{{item.OrderOfSeverity}}</td>
                            <td>{{item.Harm}}</td>
                            <td>{{item.InvolveScope}}</td>
                            <td>{{item.TransportationSafety}}</td>
                            <td>{{item.SecurityDefense}}</td>
                            <td>{{item.CircumstancesInfluence}}</td>
                        </tr> -->
            <template v-for="(item, index) in list">
                <tbody :key="index">
                    <tr v-if="index == 0">
                        <td colspan="2" style="text-align: center;background-color: darkgray;vertical-align: middle;">伤害/职业病影响</td>
                    </tr>
                    <tr style="text-align: left;">
                        <td style="width:120px;text-align: center;vertical-align: middle;font-size:13px">{{item.OrderOfSeverity}}</td>
                        <td style="vertical-align: middle;padding:5px 5px;"><span style="line-height:20px;font-size:13px;">{{item.Harm}}</span></td>
                    </tr>
                </tbody>
            </template>
            <template v-for="(item, index) in list">
                <tbody :key="index">
                    <tr v-if="index == 0">
                        <td colspan="2" style="text-align: center;background-color: darkgray;vertical-align: middle;">火灾/爆炸/财产损失</td>
                    </tr>
                    <tr style="text-align: left;">
                        <td style="width:90px;text-align: center;vertical-align: middle;font-size:13px">{{item.OrderOfSeverity}}</td>
                        <td style="vertical-align: middle;padding:5px 5px;"><span style="line-height:20px;font-size:13px;">{{item.InvolveScope}}</span></td>
                    </tr>
                </tbody>
            </template>
            <template v-for="(item, index) in list">
                <tbody :key="index">
                    <tr v-if="index == 0">
                        <td colspan="2" style="text-align: center;background-color: darkgray;vertical-align: middle;" v-if="queryParams.dataType=='B'">交通安全</td>
                        <td colspan="2" style="text-align: center;background-color: darkgray;vertical-align: middle;" v-if="queryParams.dataType=='A'">生产异常影响</td>
                    </tr>
                    <tr style="text-align: left;">
                        <td style="width:90px;text-align: center;vertical-align: middle;font-size:13px">{{item.OrderOfSeverity}}</td>
                        <td style="vertical-align: middle;padding:5px 5px;"><span style="line-height:20px;font-size:13px;">{{item.TransportationSafety}}</span></td>
                    </tr>
                </tbody>
            </template>
            <template v-for="(item, index) in list">
                <tbody :key="index">
                    <tr v-if="index == 0">
                        <td colspan="2" style="text-align: center;background-color: darkgray;vertical-align: middle;" v-if="queryParams.dataType=='A'">潜在化学品影响</td>
                        <td colspan="2" style="text-align: center;background-color: darkgray;vertical-align: middle;" v-if="queryParams.dataType=='B'">治安保卫</td>

                    </tr>
                    <tr style="text-align: left;vertical-align: middle">
                        <td style="width:90px;text-align: center;vertical-align: middle;font-size:13px">{{item.OrderOfSeverity}}</td>
                        <td style="vertical-align: middle;padding:5px 5px;"><span style="line-height:20px;font-size:13px;">{{item.SecurityDefense}}</span></td>

                    </tr>
                </tbody>
            </template>
            <template v-for="(item, index) in list">
                <tbody :key="index">
                    <tr v-if="index == 0">
                        <td colspan="2" style="text-align: center;background-color: darkgray;vertical-align: middle;">声誉/环境影响</td>
                    </tr>
                    <tr style="text-align: left;vertical-align: middle">
                        <td style="width:90px;text-align: center;vertical-align: middle;font-size:13px;">{{item.OrderOfSeverity}}</td>
                        <td style="vertical-align: middle;padding:5px 5px;"><span style="line-height:20px;font-size:13px;">{{item.CircumstancesInfluence}}</span></td>
                    </tr>
                </tbody>
            </template>
        </table>
    </div>

</template>
<script>
import UserChooseDialog from "@/views/components/user/userChooseDialog.vue";
import investigateList from "@/views/wh/AccidentInvestigate/List.vue";
import { getMenuByMenuCode } from "@/api/common";
import { GetPageData } from "@/api/WhProcessSafetyAccident";
export default {
    components: { investigateList, UserChooseDialog },
    name: "ExplainList",
    props: {
        Type: {
            type: String,
            default() {
                return "";
            },
        },
    },
    data() {
        return {
            list: [],
            searchValue: "",
            conditions: {},
            controller: "/WhProcessSafetyAccident",
            queryParams: {
                dataType: this.Type,
                keywords: "",
            },
            rightValue: 0,
            userChooseDialogShow1: false,
        };
    },
    created() {
        //this.getMenuByMenuCode();
        this.getList();
    },
    mounted() {},
    methods: {
        getList() {
            this.queryParams.dataType = this.Type;
            GetPageData(this.queryParams)
                .then((res) => {
                    this.loading = false;
                    this.list = res.data.Data;
                    //this.filter.page = res.data.PageIndex;
                })
                .catch((err) => {
                    this.finished = true;
                });
        },
        // getMenuByMenuCode() {
        //     var me = this;
        //     getMenuByMenuCode("GxInterviewRecord_List").then((res) => {
        //         me.rightValue = res.data ? res.data.RoleRightValue : 0;
        //     });
        // },
    },
};
</script>
<style lang="less" scoped>
.phone {
    position: relative;
    .code {
        position: absolute;
        right: 20px;
        top: 20px;
        font-size: 12px;
    }
}
.register-info {
    background-color: #e8f1f8;
    padding-bottom: 20px;
}
.img-box {
    height: 50px;
    width: 50px;
    padding: 10px;
    position: absolute;
    left: 50%;
    top: 60px;
    background-color: #fff;
    border-radius: 50%;
    overflow: hidden;
}

tr td,
th {
    border: 1px solid black;
}
tr {
    height: 30px;
    //text-align: center;
    white-space: pre-wrap;
    width: 100%;

    // text-align: left;
}
td {
    //text-align: left;

    white-space: pre-wrap;
}
.popup-title {
    line-height: 35px;
    padding: 10px;
    font-size: 15px;
    padding-left: 20px;
}

.op_btn {
    display: flex;
    justify-content: flex-end;
    .btn_item {
        display: flex;
        align-items: center;
        img {
            height: 15px;
            width: 15px;
            margin-right: 5px;
        }
    }
}

.search-box {
    height: 1rem;
}
</style>